<template>
  <el-card class="box-card el-card-flex">
    <div slot="header" class="clearfix">
      <span>
        <i class="el-icon-cpu"></i>
        应用管理
      </span>
    </div>
    <!-- 应用管理列表 -->
    <div class="item text">
      <el-form :inline="true" class="demo-form-inline" :model="formInlineSearch" ref="formInlineSearch" @submit.native.prevent>
        <el-form-item label="">
          <el-input clearable v-model="formInlineSearch.textSearch" placeholder="请输入应用编码/名称" @keyup.enter.native="appManage(1, 20)"
            @clear="appManage">
            <el-button slot="append" icon="el-icon-search" @click="appManage(1, 20)"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="advancedSearch">
            高级查询
            <i class="el-icon-magic-stick"></i>
          </el-button>
        </el-form-item>
        <el-form-item style="float:right">
          <el-button type="primary" plain @click="handleadd">
            新增
            <i class="el-icon-plus"></i>
          </el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <div class="el-flex el-box-column">
        <el-table :data="appTabelData" border stripe style="width: 100%" height="100%" ref="appRefTable">
          <el-table-column min-width="100px" :show-overflow-tooltip="true" prop="appCode" label="应用编码"></el-table-column>
          <el-table-column min-width="100px" :show-overflow-tooltip="true" prop="appName" label="应用名称"></el-table-column>
          <el-table-column min-width="100px" :show-overflow-tooltip="true" prop="ipAddr" label="主机名"></el-table-column>
          <el-table-column min-width="100px" :show-overflow-tooltip="true" prop="ipPort" label="端口" align="center"></el-table-column>
          <el-table-column min-width="100px" :show-overflow-tooltip="true" prop="realAddr" label="访问地址"></el-table-column>
          <el-table-column min-width="100px" :show-overflow-tooltip="true" prop="appDesc" label="说明"></el-table-column>
          <el-table-column width="110" prop="appStatus" label="应用状态" align="center">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.appStatus" active-value="Y" inactive-value="N" @change="appStatusclick(scope.$index, scope.row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column width="180px" label="排序" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button class="td-btn-icon" title="上移" type="text" @click="appHandleUp(scope.$index, scope.row)"><i class="el-icon-top"></i></el-button>
              <el-button class="td-btn-icon" title="下移" type="text" @click="appHandleDown(scope.$index, scope.row)"><i class="el-icon-bottom"></i></el-button>
              <el-button class="td-btn-icon" title="置顶" type="text" @click="appHandleTop(scope.$index, scope.row)"><i class="el-icon-download download"></i></el-button>
              <el-button class="td-btn-icon" title="置底" type="text" @click="appHandleBottom(scope.$index, scope.row)"><i class="el-icon-download"></i></el-button>
            </template>
          </el-table-column>
          <el-table-column width="70" prop="control" align="center" label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button class="td-btn-icon" type="text" title="修改应用管理" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination background @size-change="handleSizeChange" :current-page="currentPage" @current-change="handleCurrentChange"
          :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
      <!-- 编辑弹窗 -->
      <el-dialog :title="modalTitle" :visible.sync="dialogVisible" :before-close="handleClose" class="demo-radius demo-ruleForm el-over-auto"
        :close-on-click-modal="false" :close-on-press-escape="false">
        <!-- <div class="container" style="height:400px;overflow:auto;padding-right:20px"> -->
        <el-form label-width="100px" :model="appFormInline" ref="appFormInline" :rules="rules" class="demo-ruleForm">
          <el-form-item v-if="appFormInline.appId" label="应用ID:">
            <el-col :span="9">
              <el-input v-model="appFormInline.appId" placeholder="应用ID" readonly></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="应用编码:" prop="appCode" :rules="[
								{
									required: true,
									message: '应用编码不能为空',
									trigger: 'blur'
								}
							]">
            <el-col :span="9">
              <el-input v-model="appFormInline.appCode" placeholder="请输入应用编码" :readonly="readonly"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="应用名称:" prop="appName" :rules="[
								{
									required: true,
									message: '应用名称不能为空',
									trigger: 'blur'
								}
							]">
            <el-col :span="12">
              <el-input v-model="appFormInline.appName" placeholder="请输入应用名称" auto-complete="off"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="图标:" prop="nodeIcon">
            <el-col :span="24" class="upload-no-trans">
              <el-upload
                ref="upload"
                list-type="picture-card"
                :file-list="fileList"
                action="/api/ccms/attachment/uploadByBusiness"
                :on-change="uploadIconChange"
                :data="{
                  businessId: appFormInline.appId,
                  bigCatName: '应用管理',
                  smallCatName: '图标',
                  sysCode: this.sysCode
                }"
                :headers="{
                  Authorization: this.Authorization
                }"
                :before-upload="beforeUpload"
                :on-remove="handleRemove"
                :on-success="uploadIconSuccess"
                :on-error="uploadIconError"
                :auto-upload="false"
              >
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
            </el-col>
					</el-form-item>
          <el-form-item label="应用状态:" prop="appStatus">
            <el-switch v-model="appFormInline.appStatus" active-value="Y" inactive-value="N"></el-switch>
          </el-form-item>
          <el-form-item label="主机名:" prop="ipAddr">
            <el-col :span="15">
              <el-input v-model="appFormInline.ipAddr" placeholder="请输入主机名" auto-complete="off"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="端口:" prop="ipPort">
            <el-col :span="9">
              <el-input v-model="appFormInline.ipPort" placeholder="请输入端口" auto-complete="off"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="访问地址:" prop="realAddr" :rules="[{required: true,message: '访问地址不能为空',
									trigger: 'blur'}]">
            <el-col :span="12">
              <el-input v-model="appFormInline.realAddr" placeholder="请输入访问地址" auto-complete="off"></el-input>
            </el-col>
            <el-col :span="12" style="padding-left: 10px;">
              <el-checkbox-group v-model="appFormInline.appInfo">
                <el-checkbox border label="/layout">顶部导航</el-checkbox>
                <el-checkbox border label="/frame">侧边导航</el-checkbox>
              </el-checkbox-group>
            </el-col>
          </el-form-item>
          <el-form-item label="说明:" prop="appDesc">
            <el-input type="textarea" :rows="2" v-model="appFormInline.appDesc" placeholder="请输入说明"></el-input>
          </el-form-item>
        </el-form>
        <!-- <el-row style="text-align:right">
						<el-button type="primary" plain @click="addAuthorization">新增授权 <i class="el-icon-plus"></i></el-button>
					</el-row> -->
        <!-- <el-table
						:data="authorizationData"
						border
						stripe
						style="width: 100%;margin-top:20px;margin-bottom:20px"
						:key="tableKey"
						ref="appRefTable"
						>
						<el-table-column type="selection" align="center"></el-table-column>
						<el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="userName" label="用户名"></el-table-column>
						<el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="empName" label="员工姓名"></el-table-column>
						<el-table-column min-width="100px" sortable prop="control" align="center" label="操作" fixed="right">
						<template slot-scope="scope">
							<el-button class="td-btn-icon" type="text" title="删除用户信息" icon="el-icon-delete" @click="handleDelete(scope.$index, authorizationData)"></el-button>
						</template>
					</el-table-column>
					</el-table> -->
        <!-- <el-pagination
						background
						:current-page="nowPageNum"
						@current-change="currentChange"
						:page-size="pageSize"
						layout="total, prev, pager, next, jumper"
						:total="total"
					></el-pagination> -->
        <!-- </div> -->
        <span slot="footer" class="dialog-footer" style="text-align:right;width:100%;display:inline-block">
          <el-button type="primary" @click="handleSave">保存 <i class="el-icon-document-checked el-icon--right"></i></el-button>
          <el-button type="danger" @click="handleCheck(false)">关闭 <i class="el-icon-close"></i></el-button>
        </span>
      </el-dialog>
      <!-- 新增授权弹框 -->
      <el-dialog :title="modalTitle1" :visible.sync="dialogAddVisible" :before-close="handleAddClose" class="demo-ruleForm"
        custom-class="el-dialog-flex" :close-on-click-modal="false" :close-on-press-escape="false">
        <el-input clearable v-model="textSearchUser" placeholder="请输入用户名/别名" style="width:280px;" @keyup.enter.native="addAuthorizationEvent"
          @clear="addAuthorizationEvent">
          <el-button slot="append" icon="el-icon-search" @click="addAuthorizationEvent"></el-button>
        </el-input>
        <el-table :data="appData" border stripe @selection-change="handleSelectionChange" style="width: 100%;margin-top:10px;margin-bottom:10px"
          ref="appRefTable" height="100%">
          <el-table-column type="selection" align="center"></el-table-column>
          <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="userName" label="用户名"></el-table-column>
          <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="name" label="员工姓名"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination background @size-change="handleSizeUserChange" :current-page="currentUserPage" @current-change="handleCurrentUserChange"
          :page-size="pageUserSize" layout="total, sizes, prev, pager, next, jumper" :total="totalUser"></el-pagination>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleAuthorizationSure">
            确定
            <i class="el-icon-document-checked el-icon--right"></i>
          </el-button>
          <el-button @click="handleCloseCheck(false)">
            取消
            <i class="el-icon-refresh-left"></i>
          </el-button>
        </span>
      </el-dialog>
      <!-- 高级查询抽屉式弹框 -->
      <el-drawer title="高级查询" :visible.sync="dialogSearch" :before-close="searchClose" direction="rtl" custom-class="demo-drawer"
        ref="drawer" :wrapperClosable="true" :close-on-press-escape="false">
        <div class="demo-drawer__content el-box-column" style="height: 100%; margin-left: 6px;">
          <el-form label-width="100px" :model="formInline" ref="formInline" :rules="rules" class="el-flex">
            <el-form-item label="应用编码:" prop="appCode">
              <el-col :span="9">
                <el-input v-model="formInline.appCode" placeholder="请输入应用编码"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="应用名称:" prop="appName">
              <el-col :span="12">
                <el-input v-model="formInline.appName" placeholder="请输入应用名称" auto-complete="off"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="应用状态:" prop="appStatus">
              <!-- <el-switch v-model="formInline.appStatus" active-value="Y" inactive-value="N"></el-switch> -->
              <el-radio-group v-model="formInline.appStatus">
                <el-radio border label="">全部</el-radio>
                <el-radio border label="Y">启用</el-radio>
                <el-radio border label="N">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- <el-form-item label="访问地址:" prop="realAddr">
              <el-col :span="12">
                <el-input v-model="formInline.realAddr" placeholder="访问地址" auto-complete="off"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="说明:" prop="appDesc">
              <el-col :span="15">
                <el-input v-model="formInline.appDesc" placeholder="说明"></el-input>
              </el-col>
            </el-form-item> -->
          </el-form>
          <div class="demo-drawer__footer" style="text-align: right; margin-bottom: 10px; padding-right:10px;">
            <el-button type="primary" @click="appManage(1, 20)">
              确定
              <i class="el-icon-document-checked el-icon--right"></i>
            </el-button>
            <el-button @click="handleSearchClose">
              重置
              <i class="el-icon-refresh-left"></i>
            </el-button>
          </div>
        </div>
      </el-drawer>
    </div>
  </el-card>
</template>

<script>
  import {
    Tree,
    Dialog,
    Table,
    TableColumn,
    Pagination,
    MessageBox,
    Message,
    Drawer,
    Upload
  } from 'element-ui';
  import { userList } from '@/api/authority/areaManage/areaManage.js'
  import { ccmsAppsList, ccmsAppsSvOrUp, getAppAuthUser, cancelAppAuth, moveOrder } from '@/api/authority/appManage/appManage.js'
  import {
    fileuploadUrl, // 文件上传接口
    attachPath, // 附件绝对地址
    findAttchList, // 获取文件列表
		deleteAttid // 附件删除
  } from '@/api/attachCommon/attachCommon.js'
  import { getCookie } from '@/api/layout/layout.js' // 获取cookie
  export default {
    name: 'appManage',
    components: {
      'el-tree': Tree, // 树形菜单
      'el-dialog': Dialog, // 对话框
      'el-table': Table, // 表格
      'el-table-column': TableColumn, // 表格列
      'el-pagination': Pagination, // 分页
      'el-drawer': Drawer,
      'el-upload': Upload, // 上传图片
    },
    data() {
      let appInlineVal = {
        appCode: '',
        appName: '',
        appStatus: 'Y',
        ipAddr: '',
        ipPort: '',
        appDesc: '',
        appInfo: ["/layout", "/frame"],
        realAddr: ""
      }
      let appInlineSearchVal = {
        appCode: '',
        appName: '',
        appStatus: '',
        ipAddr: '',
        ipPort: '',
        appDesc: '',
        realAddr: "",
        appInfo: ''
      }
      return {
        formInlineSearch: {},
        dialogVisible: false,
        dialogAddVisible: false,
        modalTitle: "",
        modalTitle1: '新增授权',
        pageSize: 20,
        pageUserSize: 20, // 新增授权用户显示页数
        appStatus: '',
        allData: [{
          appCode: 'XC',
          appName: '业务综合管理系统',
          ipAddr: '',
          ipPort: '',
          appStatus: '',
          appDesc: '',
          appInfo: ''
        }, {
          appCode: 'XIP',
          appName: '信息技术开发公司平台',
          ipAddr: '',
          ipPort: '',
          appStatus: '',
          appDesc: '',
          appInfo: ''
        }],
        tableData: [],
        appData: [], // 获取所有授权数据
        multipleSelection: [],
        formInline: JSON.parse(JSON.stringify(appInlineSearchVal)), // 应用管理高级查询条件
        rules: {},
        tableKey: 1, // 自动刷新表格
        readonly: '', // 设置应用编码不能修改
        appTabelData: [], // 应用列表数据
        currentPage: 1, // 当前显示页数
        currentUserPage: 1, // 新增授权用户当前页
        total: 0, // 显示总页数
        totalUser: 0, // 新增授权用户表格总条数
        appId: '', // 应用列表id
        appInlineVal: JSON.parse(JSON.stringify(appInlineVal)), // 新增/编辑弹框里的model,用于重置表单
        appFormInline: JSON.parse(JSON.stringify(appInlineVal)), // 新增/编辑弹框里的model
        authorizationData: [], // 点击新增/编辑弹框内的表格获取数据
        dialogSearch: false, // 高级查询搜索弹框显示
        textSearch: '', // 搜索model值
        searchData: '', // 存储搜索来的数据
        checkDatas: [], // 新增授权选中行数据
        userId: [], // 用户id
        userAccountId: [], // 获取id和
        textSearchUser: '', // 搜索新增授权的用户
        fileList: [], // 附件列表
        sysCode: '', // 获取系统sysCode
        Authorization: '', // 获取系统Authorization
        upFileIndex: 0, // 上传成功了第几个文件
        fileListData: [], // 回显附件列表
        attIds: '', // 上传图片id
      };
    },
    created() {
      this.appManage()
      this.addAuthorizationEvent()
      window.onresize = () => {
        // console.log(111111)
        this.$refs.appRefTable.doLayout()
      }
      this.sysCode = this.getCookie('sysCode')
      this.Authorization = this.getCookie('Authorization')
    },
    methods: {
      // 获取cookie
      getCookie (cname) {
        var name = cname + "="
        var ca = document.cookie.split(';')
        for (var i = 0; i < ca.length; i++) {
          var c = ca[i].trim()
          if (c.indexOf(name) == 0) return c.substring(name.length, c.length)
        }
        return ""
      },
      // 附件上传拦截
			uploadIconChange (file, fileList) { // 文件发生改变
        var imageClass = file.name.substring(file.name.lastIndexOf(".") + 1)
        const imageStyle =
          imageClass === "jpg" ||
          imageClass === "JPG" ||
          imageClass === "png" ||
          imageClass === "PNG" ||
          imageClass === "bpm" ||
          imageClass === "BPM" ||
          imageClass === "JPEG" ||
          imageClass === "jpeg";
        if (!imageStyle) {
          Message({
            message: "上传图片只能是jpg / png / bpm/jpeg格式!",
            type: "error"
          })
          fileList.pop()
					this.fileList = fileList
        } else {
          if(fileList.length>1){
						fileList.splice(0,1)
					}
					this.fileList = fileList
          return imageStyle
        }
      },
      // 删除图片
      handleRemove (file) {
        if (!file.attId) {
          this.appFormInline.nodeIcon = ""
          return
        }
        deleteAttid(file.attId).then(res=> {
          if (res.data.code == 10000) {
            Message.success('删除成功')
          }
        }) 
      },
      // 上传文件之前的钩子
      beforeUpload () {
        this.upFileIndex = 0
        return true
      },
      // 文件上传(提交)接口成功
			uploadIconSuccess (res, file, fileList) {
				if (res.code === 10000) {
          // this.upFileIndex++
          // if (this.upFileIndex === fileList.length) Message.success('上传成功')
          console.log('上传成功', res)
        }
			},
			// 文件上传(提交)接口失败
			uploadIconError (err) {
				Message.error('操作失败')
			},
      // 应用列表接口
      appManage(currentPage = this.currentPage, pageSize = this.pageSize) {
        let sendDatas = {}
        if (this.dialogSearch) { // 高级查询
          Object.assign(sendDatas, this.formInline)
				  this.dialogSearch = false
        } else {
          let textSearch = this.formInlineSearch.textSearch
          if (!textSearch) {
            textSearch = ''
            currentPage = this.currentPage
            pageSize = this.pageSize
          }
          sendDatas.textSearch = textSearch
        }
        ccmsAppsList(currentPage, pageSize, sendDatas).then(res => {
          console.log(res)
          this.appTabelData = res.data.data.records || []
          this.total = res.data.data.total || 0
          this.currentPage = currentPage || 1
          setTimeout(() => {
            this.$refs.appRefTable.doLayout()
          }, 0)
        })
      },
      // 每页条数
      handleSizeChange(val) {
        this.pageSize = val
        this.appManage()
      },
      // 当前页数
      handleCurrentChange(val) {
        this.currentPage = val
        this.appManage()
      },
      // 应用新增事件
      handleadd() {
        this.dialogVisible = true
        this.modalTitle = '应用信息'
        this.readonly = false
        this.fileList = []
        // this.appFormInline.appStatus = 'Y'
      },
      // 编辑授权表格获取数据事件
      authorizationTabel(row) {
        // this.appId = row.appId
        let id = row.appId
        console.log(id)
        getAppAuthUser(id).then(res => {
          console.log(res)
          this.authorizationData = res.data.data
          this.authorizationData.forEach(v => {
            this.userId.push(v.userId)
            console.log(this.userId)
          })
        })
      },
      // 应用新增/编辑保存事件
      handleSave() {
        this.$refs.appFormInline.validate(valid => {
          if (!valid) return
          let userIds = []
          this.authorizationData.forEach(e => {
            userIds.push(e.userId)
          })
          ccmsAppsSvOrUp({
            appId: this.appFormInline.appId ? this.appFormInline.appId : "",
            appCode: this.appFormInline.appCode,
            appName: this.appFormInline.appName,
            appStatus: this.appFormInline.appStatus,
            appDesc: this.appFormInline.appDesc,
            appInfo: this.appFormInline.appInfo.toString().replace(",", ""),
            realAddr: this.appFormInline.realAddr,
            ipAddr: this.appFormInline.ipAddr,
            ipPort: this.appFormInline.ipPort,
            userIds: userIds
          }).then(res => {
            console.log(res.data.code)
            if (res.data.code == 10000) {
              if (this.fileList.length >= 2) this.fileList.splice(0, this.fileList.length - 1)
              // this.fileListData = this.fileList
              this.fileListData.forEach(v => {
                deleteAttid(v.attId)
              })
              this.fileListData = []
              this.$refs.upload.submit() // 手动触发上传
              Message.success('保存成功')
              this.handleClose()
              this.appManage()
              // this.currentPage = 1
            }
          })
        })
      },
      // 点击tabel里的应用状态触发编辑接口事件
      appStatusclick(index, row) {
        ccmsAppsSvOrUp({
          appId: row.appId,
          appCode: row.appCode,
          appName: row.appName,
          appStatus: row.appStatus,
          appDesc: row.appDesc,
          appInfo: row.appInfo,
          ipAddr: row.ipAddr,
          ipPort: row.ipPort
        }).then(res => {
          if (res.data.code === 10000) {
            Message.success('操作成功')
            this.appManage()
          }
        })
      },
      // 上移事件
      appHandleUp (index, row) {
        let appId = row.appId
        moveOrder(appId, 'up').then(res => {
          if (res.data.code === 10000) {
            this.appManage()
          }
        })
      },
      // 下移事件
      appHandleDown (index, row) {
        let appId = row.appId
        moveOrder(appId, 'down').then(res => {
          if (res.data.code === 10000) {
            this.appManage()
          }
        })
      },
      // 置顶事件
      appHandleTop (index, row) {
        let appId = row.appId
        moveOrder(appId, 'top').then(res => {
          if (res.data.code === 10000) {
            this.appManage()
          }
        })
      },
      // 置底事件
      appHandleBottom (index, row) {
        let appId = row.appId
        moveOrder(appId, 'bottom').then(res => {
          if (res.data.code === 10000) {
            this.appManage()
          }
        })
      },
      // 编辑弹框
      handleEdit(index, row) {
        this.dialogVisible = true
        this.modalTitle = '应用信息'
        this.readonly = true
        this.appFormInline = JSON.parse(JSON.stringify(row))
        this.appFormInline.appInfo = []
        if (row.appInfo) {
          row.appInfo.split("/").forEach(e => {
            if (e) {
              this.appFormInline.appInfo.push("/" + e)
            }
          })
        }
        findAttchList ({
          businessId: row.appId,
          bigCatName: '应用管理',
          smallCatName: '图标'
        }).then(res=> {
          if (res.data.code == 10000) {
            if (res.data.data.records !== []) {
              this.fileListData = res.data.data.records
              this.fileList.splice(0, this.fileList.length)
              if (this.fileListData.length) {
                let v = this.fileListData[this.fileListData.length - 1]
                // this.attIds = v.attId
                this.fileList.push({
                  attId: v.attId,
                  name: v.attFullName,
                  url: attachPath+v.attRefId
                })
              }
            }
          }
        })
        this.authorizationTabel(row) // 点击新增弹框内的表格获取数据事件
      },
      // 关闭弹框 主要用于清空表单和校验
      handleClose() {
        // let $appFormInline = this.$refs.appFormInline
        this.appFormInline = JSON.parse(JSON.stringify(this.appInlineVal))
        this.$refs.appFormInline.resetFields()
        // this.appFormInline = {}
        this.userId = []
        this.authorizationData = []
        this.dialogVisible = false
      },
      // 关闭新增弹框
      handleCheck() {
        this.handleClose()
      },
      // 获取所有授权数据事件
      addAuthorizationEvent() {
        let data = {
          page: this.currentUserPage,
          size: this.pageUserSize
        }
        data.type = 1
        data.userName = this.textSearchUser
        data.name = this.textSearchUser
        userList({
          params: data
        }).then(res => {
          // console.log(res)
          this.appData = res.data.data.records
          this.totalUser = res.data.data.total
          setTimeout(() => {
            this.$refs.appRefTable.doLayout() // 表格刷新以后，重绘表格宽度
          }, 0)
        })
      },
      // 新增授权事件
      addAuthorization() {
        this.dialogAddVisible = true
      },
      // 关闭新增授权按钮
      handleAddClose() {
        this.dialogAddVisible = false
        this.$refs.appRefTable.clearSelection()
        // this.checkDatas = []
      },
      // 新增授权弹框关闭按钮
      handleCloseCheck() {
        this.handleAddClose()
      },
      // 删除员工信息
      handleDelete(index, data) {
        MessageBox.confirm('是否确定要删除该行数据?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            this.delRowData(index, data)
          })
          .catch(() => {})
      },
      // 删除
      delRowData(index, data) {
        // console.log(row)
        let appAuthId = data[index].appAuthId
        if (!appAuthId) {
          data.splice(index, 1)
          return
        }
        cancelAppAuth([appAuthId])
          .then(res => {
            console.log(res.data.code)
            if (res.data.code === 10000) {
              Message.success('删除成功')
              data.splice(index, 1)
              // this.authorizationTabel(row) // 删除成功再次调用新增弹框内的表格获取数据事件
            }
          })
          .catch(error => {
            console.log(error)
          })
      },
      // 新增授权点击复选框
      handleSelectionChange(val) {
        this.checkDatas = val
      },
      // 新增授权弹框里的保存按钮事件
      handleAuthorizationSure() {
        console.log('点击了确定')
        let userIds = []
        this.authorizationData.forEach(e => {
          userIds.push(e.userId)
        })
        this.checkDatas.forEach(e => {
          if (userIds.indexOf(e.userAccountId) == -1) {
            e.userId = e.userAccountId
            e.empName = e.name
            this.authorizationData.push(e)
          }
        })
        this.handleAddClose()
      },
      // 高级查询事件
      advancedSearch() {
        this.dialogSearch = true
      },
      // 高级查询弹框关闭
      searchClose() {
        this.dialogSearch = false
      },
      // 高级查询点击弹框取消事件
      handleSearchClose() {
        this.$refs.formInline.resetFields()
        this.dialogSearch = false
        this.appManage()
      },
      // 新增授权弹框里分页里每页数据
      handleSizeUserChange(val) {
        this.pageUserSize = val
        this.addAuthorizationEvent()
      },
      // 新增授权弹框里分页里当前页数
      handleCurrentUserChange(val) {
        this.currentUserPage = val
        this.addAuthorizationEvent()
      }
    }
  };
</script>
<style lang="scss" scoped>
.download {
  transform:rotate(180deg);
}
</style>